<template>
	<view class="container">
		<!-- <image src="https://www.naolamp.cn/sale//common/getImage?id=group1/M00/00/BB/rBLvXGdSaUGEVZmKAAAAAKii2-8150.png"
			mode='widthFix' style=" object-fit: cover;border-radius: 10rpx;" /> -->
		<!-- 标题显示 -->
		<!-- <view class="title">{{ title }}</view> -->
		<!-- 标题区域（灰色透明框） -->


		<!-- 全屏视频播放器 -->
		<view class="fullscreen-video" v-if="isFullScreen">
			<swiper class="video-swiper" :current="currentVideoIndex" @change="onSwiperChange" vertical>
				<swiper-item v-for="(videoUrl, index) in videoList" :key="index">
					<video class="fullscreen-video-player" :src="videoList[currentVideoIndex]" :controls="false"
						autoplay show-mute-btn="true" @click="exitFullScreen"></video>
					<!-- 用户头像 -->
					<view class="user-avatar" @click="showHome(carInfo.shareList[currentVideoIndex].userInfoId)">
						<image
							:src="carInfo.shareList[currentVideoIndex].headImgUrl || '../../../static/images/default_avatar.png'"
							mode="aspectFill"></image>
					</view>
					<!-- 用户名字 -->
					<view class="user-name" @click="showHome(carInfo.shareList[currentVideoIndex].userInfoId)">
						{{ carInfo.shareList[currentVideoIndex].userName }}
					</view>
					<!-- 车型品牌 -->
					<view class="car-brand">
						<image style="width: 45rpx;height: 45rpx;margin-right: 8px;"
							src="../../../static/images/xiaocar.png"></image> {{ carInfo.secondBrand }}
						{{ carInfo.modelName }} {{ carInfo.carYear }}
					</view>
					<!-- 地址人名 -->
					<view class="city-name">
						#{{ carInfo.shareList[currentVideoIndex].city }}
						{{ carInfo.shareList[currentVideoIndex].userName }}
					</view>
					<!-- 视频文案 -->
					<view class="video-caption">
						{{ carInfo.shareList[currentVideoIndex].shareContent }}
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 选项卡 -->
		<view style="display: flex;justify-content: center;">
			<u-tabs :list="tabs" :current="currentTab" inactive-color="#FF0000" @change="switchTab"
				:active-color="barStyle"></u-tabs>
			<button class="tab tab-text" open-type="contact" session-from="sessionFrom" style="min-width: 100px;">
				联系客服
			</button>
		</view>


		<view v-if="currentTab === 0">
			<!-- 具体信息展示 -->
			<view class="car-box">
				<view style="margin-bottom: 46rpx;">
					<view style="display: flex;justify-content: space-between;">
						<view>
							<text class="section-label">近光灯: <text @click="fetchProductList(carInfo.jinDeng.trim())"
									class="uni-flex-item-lamp">{{ carInfo.jinDeng ? carInfo.jinDeng : '' }}</text></text>
						</view>
						<!-- <view>
							<text class="section-label" @click="fetchProductList(carInfo.jinDeng.trim())">更多</text>
						</view> -->
					</view>
					<view class="product-grid">
						<view class="product-item" v-for="(jin, index) in jinDengList.slice(0,2)" :key="index">
							<view @click="skipToDetails(jin.categoryId)">
								<image :src="jin.productImage" mode="aspectFill" class="product-image"></image>
							</view>
						</view>
						<view class="product-info" @click="skipToDetails(jin.categoryId)"
							:style="{ width: jinDengList.length === 1 ? '100%' : '48%' }"
							v-for="(jin, index) in jinDengList.slice(0,2)" :key="index">
							<text class="product-name">{{ jin.productName }}</text>
							<text style="font-weight: bold;" v-if="userType == 'STORE'"
								class="salePrice">￥{{ jin.proxyPrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'CAR'"
								class="salePrice">￥{{ jin.salePrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'SALE'"
								class="salePrice">￥{{ jin.productPrice }}</text>
						</view>
					</view>
				</view>

				<!-- 远灯部分 -->
				<view style="margin-bottom: 46rpx;">
					<view style="display: flex;justify-content: space-between;">
						<view>
							<text class="section-label">远光灯: <text @click="fetchProductList(carInfo.yuanDeng.trim())"
									class="uni-flex-item-lamp">{{ carInfo.yuanDeng ? carInfo.yuanDeng : '' }}</text></text>
						</view>
						<!-- <view>
							<text class="section-label" @click="fetchProductList(carInfo.yuanDeng.trim())">更多</text>
						</view> -->
					</view>
					<view class="product-grid">
						<view class="product-item" v-for="(yuan, index) in yuanDengList.slice(0,2)" :key="index">
							<view @click="skipToDetails(yuan.categoryId)">
								<image :src="yuan.productImage" mode="aspectFill" class="product-image"></image>
							</view>
						</view>
						<view class="product-info" @click="skipToDetails(yuan.categoryId)"
							:style="{ width: yuanDengList.length === 1 ? '100%' : '48%' }"
							v-for="(yuan, index) in yuanDengList.slice(0,2)" :key="index">
							<text class="product-name">{{ yuan.productName }}</text>
							<text style="font-weight: bold;" v-if="userType == 'STORE'"
								class="salePrice">￥{{ yuan.proxyPrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'CAR'"
								class="salePrice">￥{{ yuan.salePrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'SALE'"
								class="salePrice">￥{{ yuan.productPrice }}</text>
						</view>
					</view>
				</view>

				<!-- 雾灯部分 -->
				<view style="margin-bottom: 46rpx;">
					<view style="display: flex;justify-content: space-between;">
						<view>
							<text class="section-label">雾光灯: <text @click="fetchProductList(carInfo.wuDeng.trim())"
									class="uni-flex-item-lamp">{{ carInfo.wuDeng ? carInfo.wuDeng : '' }}</text></text>
						</view>
						<!-- <view>
							<text class="section-label" @click="fetchProductList(carInfo.wuDeng.trim())">更多</text>
						</view> -->
					</view>
					<view class="product-grid">
						<view class="product-item" v-for="(wu, index) in WuDengList.slice(0,2)" :key="index">
							<view @click="skipToDetails(wu.categoryId)">
								<image :src="wu.productImage" mode="aspectFill" class="product-image"></image>
							</view>
						</view>
						<view class="product-info" @click="skipToDetails(wu.categoryId)"
							:style="{ width: WuDengList.length === 1 ? '100%' : '48%' }"
							v-for="(wu, index) in WuDengList.slice(0,2)" :key="index">
							<text class="product-name">{{ wu.productName }}</text>
							<text style="font-weight: bold;" v-if="userType == 'STORE'"
								class="salePrice">￥{{ wu.proxyPrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'CAR'"
								class="salePrice">￥{{ wu.salePrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'SALE'"
								class="salePrice">￥{{ wu.productPrice }}</text>
						</view>
					</view>
				</view>


				<!-- <view class="tit">改灯方案</view> -->


				<!-- 解码器部分 -->
				<view v-if="carInfo.jieMa">
					<view style="display: flex;justify-content: space-between;">
						<view>
							<text class="section-label">专用解码器: <text @click="fetchProductList(carInfo.jieMa.trim())"
									class="uni-flex-item-lamp">{{ carInfo.jieMa }}</text></text>
						</view>
						<!-- <view>
							<text class="section-label">更多</text>
						</view> -->
					</view>
					<view class="product-grid">
						<view class="product-item" v-for="(jie, index) in jieMaList.slice(0, 2)" :key="index">
							<view @click="skipToDetails(jie.categoryId)">
								<image :src="jie.productImage" mode="aspectFill" class="product-image"></image>
							</view>
						</view>
						<view class="product-info" @click="skipToDetails(jie.categoryId)"
							:style="{ width: jieMaList.length === 1 ? '100%' : '48%' }"
							v-for="(jie, index) in jieMaList.slice(0, 2)" :key="index">
							<text class="product-name">{{ jie.productName }}</text>
							<text style="font-weight: bold;" v-if="userType == 'STORE'"
								class="salePrice">￥{{ jie.proxyPrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'CAR'"
								class="salePrice">￥{{ jie.salePrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'SALE'"
								class="salePrice">￥{{ jie.productPrice }}</text>
						</view>
					</view>
				</view>

				<!-- 卡座部分 -->
				<view v-if="carInfo.jinKaPan">
					<view style="display: flex; justify-content: space-between;">
						<view>
							<text class="section-label">近光卡座: <text @click="fetchProductList(carInfo.jinKaPan.trim())"
									class="uni-flex-item-lamp">{{ carInfo.jinKaPan }}</text></text>
						</view>
						<!-- <view>
							<text class="section-label">更多</text>
						</view> -->
					</view>
					<view class="product-grid">
						<view class="product-item" v-for="(ka, index) in jinKaPanList.slice(0, 2)" :key="index">
							<view @click="skipToDetails(ka.categoryId)">
								<image :src="ka.productImage" mode="aspectFill" class="product-image"></image>
							</view>
						</view>
						<view class="product-info" @click="skipToDetails(ka.categoryId)"
							:style="{ width: jinKaPanList.length === 1 ? '100%' : '48%' }"
							v-for="(ka, index) in jinKaPanList.slice(0, 2)" :key="index">
							<text class="product-name">{{ ka.productName }}</text>
							<text style="font-weight: bold;" v-if="userType == 'STORE'"
								class="salePrice">￥{{ ka.proxyPrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'CAR'"
								class="salePrice">￥{{ ka.salePrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'SALE'"
								class="salePrice">￥{{ ka.productPrice }}</text>
						</view>
					</view>
				</view>
				<view v-if="carInfo.kapan">
					<view style="display: flex; justify-content: space-between;">
						<view>
							<text class="section-label">远光卡座: <text @click="fetchProductList(carInfo.kapan.trim())"
									class="uni-flex-item-lamp">{{ carInfo.kapan }}</text></text>
						</view>
						<!-- <view>
							<text class="section-label" @click="fetchProductList(carInfo.kapan.trim())">更多</text>
						</view> -->
					</view>
					<view class="product-grid">
						<view class="product-item" v-for="(ka, index) in kaPanList.slice(0, 2)" :key="index">
							<view @click="skipToDetails(ka.categoryId)">
								<image :src="ka.productImage" mode="aspectFill" class="product-image"></image>
							</view>
						</view>
						<view class="product-info" @click="skipToDetails(ka.categoryId)"
							:style="{ width: kaPanList.length === 1 ? '100%' : '48%' }"
							v-for="(ka, index) in kaPanList.slice(0, 2)" :key="index">
							<text class="product-name">{{ ka.productName }}</text>
							<text style="font-weight: bold;" v-if="userType == 'STORE'"
								class="salePrice">￥{{ ka.proxyPrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'CAR'"
								class="salePrice">￥{{ ka.salePrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'SALE'"
								class="salePrice">￥{{ ka.productPrice }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="info-box">
				<view class="info-item" v-if="carInfo.gsJinDengName && carInfo.gsJinDengName != null">
					<text class="label">格栅灯</text>
					<view class="value" @click="fetchProductList(carInfo.gsJinDengName)">
						{{carInfo.gsJinDengName}}
					</view>
				</view>
				<view class="info-item" v-if="carInfo.gsYuanDengName && carInfo.gsYuanDengName != null">
					<text class="label">格栅灯</text>
					<view class="value" @click="fetchProductList(carInfo.gsYuanDengName)">
						{{carInfo.gsYuanDengName}}
					</view>
				</view>
				<view class="info-item" v-if="carInfo.gsSize">
					<text class="label">格栅尺寸</text>
					<view class="value">{{carInfo.gsSize}}</view>
				</view>
				<view class="info-item" v-if="carInfo.exchangeDengVideoUrl">
					<text class="label">换灯视频</text>
					<view class="value">{{carInfo.exchangeDengVideoUrl}}</view>
				</view>
				<view class="info-item" v-if="kaPanList.length > 2">
					<text class="label">远光卡座: </text>
					<view class="value">{{carInfo.kapan ? carInfo.kapan : '不需要远光卡座'}}</view>
				</view>
				<view class="info-item" v-if="jinKaPanList.length > 2">
					<text class="label">近光卡座: </text>
					<view class="value">{{carInfo.jinKaPan ? carInfo.jinKaPan : '不需要近光卡座'}}</view>
				</view>
				<!-- <view class="info-item" v-if="carInfo.kpImgUrl && carInfo.kpImgUrl != null">
					<text class="label">卡座图片</text>
					<image style="width: 200rpx;" mode="widthFix" :src="carInfo.kpImgUrl"></image>
				</view> -->
				<view class="info-item" v-if="jieMaList.length > 2">
					<text class="label">解码器: </text>
					<view class="value">{{carInfo.jieMa ? carInfo.jieMa : '不需要解码器'}}</view>
				</view>
				<view class="info-item" v-if="carInfo.jmImgUrl && carInfo.jmImgUrl != null">
					<text class="label">解码器图片</text>
					<image style="width: 200rpx;" mode="widthFix" :src="carInfo.jmImgUrl"></image>
				</view>
				<view class="info-item" v-if="carInfo.fangchenzhao">
					<text class="label">防尘罩</text>
					<view class="value">{{carInfo.fangchenzhao}}</view>
				</view>
				<view class="info-item" v-if="carInfo.installEasy">
					<text class="label">安装难易</text>
					<view class="value">{{carInfo.installEasy}}</view>
				</view>
				<view class="info-item" v-if="carInfo.remark">
					<text class="label">备 注</text>
					<view class="value">{{carInfo.remark}}</view>
				</view>
				<view class="info-item" v-if="carInfo.changeDengVideoUrl">
					<text class="label">改装视频</text>
					<view class="value">{{carInfo.changeDengVideoUrl}}</view>
				</view>
				<view class="info-item" v-if="carInfo.originGlueType">
					<text class="label">原胶类型</text>
					<view class="value">{{carInfo.originGlueType}}</view>
				</view>
				<view class="info-item" v-if="carInfo.standSupport">
					<text class="label">专用支架</text>
					<view class="value">{{carInfo.standSupport}}</view>
				</view>
				<!-- <view class="info-item" v-if="carInfo.jieMa">
					<text class="label">是否解码</text>
					<view class="value">{{carInfo.jieMa}}</view>
				</view> -->
				<view class="info-item" v-if="carInfo.allJoinRemark">
					<text class="label">大灯总成</text>
					<view class="value">{{carInfo.allJoinRemark}}</view>
				</view>
			</view>
			<view class="car-box">
				<view style="margin-bottom: 46rpx;">
					<view style="display: flex;justify-content: space-between;">
						<view>
							<text class="section-label">格栅灯: <text @click="fetchProductList('格栅近光灯')"
									class="uni-flex-item-lamp">格栅近光灯</text></text>
						</view>
						<!-- <view>
							<text class="section-label" @click="fetchProductList(carInfo.jinDeng.trim())">更多</text>
						</view> -->
					</view>
					<view class="product-grid">
						<view class="product-item" v-for="(jin, index) in grilleList.slice(0,1)" :key="index">
							<view @click="skipToDetails(jin.categoryId)">
								<image :src="jin.productImage" mode="aspectFill" class="product-image"></image>
							</view>
						</view>
						<view class="product-info" @click="skipToDetails(jin.categoryId)"
							:style="{ width: grilleList.slice(0,1).length === 1 ? '100%' : '48%' }"
							v-for="(jin, index) in grilleList.slice(0,1)" :key="index">
							<text class="product-name">{{ jin.productName }}</text>
							<text style="font-weight: bold;" v-if="userType == 'STORE'"
								class="salePrice">￥{{ jin.proxyPrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'CAR'"
								class="salePrice">￥{{ jin.salePrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'SALE'"
								class="salePrice">￥{{ jin.productPrice }}</text>
						</view>
					</view>
				</view>
				<view style="margin-bottom: 140px;">
					<view style="display: flex;justify-content: space-between;">
						<view>
							<text class="section-label">遥控线束: <text class="uni-flex-item-lamp">遥控线束</text></text>
						</view>
						<!-- <view>
							<text class="section-label" @click="fetchProductList(carInfo.jinDeng.trim())">更多</text>
						</view> -->
					</view>
					<view class="product-grid">
						<view class="product-item" v-for="(jin, index) in harnessList.slice(0,1)" :key="index">
							<view @click="skipToDetails(jin.categoryId)">
								<image :src="jin.productImage" mode="aspectFill" class="product-image"></image>
							</view>
						</view>
						<view class="product-info" @click="skipToDetails(jin.categoryId)"
							:style="{ width: harnessList.slice(0,1).length === 1 ? '100%' : '48%' }"
							v-for="(jin, index) in harnessList.slice(0,1)" :key="index">
							<text class="product-name">{{ jin.productName }}</text>
							<text style="font-weight: bold;" v-if="userType == 'STORE'"
								class="salePrice">￥{{ jin.proxyPrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'CAR'"
								class="salePrice">￥{{ jin.salePrice }}</text>
							<text style="font-weight: bold;" v-if="userType == 'SALE'"
								class="salePrice">￥{{ jin.productPrice }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="news" v-if="carInfo!=null&&carInfo!=''&&currentTab ===1">
			<view v-if="carInfo.classList.length > 0">
				<view class="box" v-for="(item, index) in carInfo.classList" :key="index">
					<view class="uni-inline-item hd">
						<image src="../../static/images/default_avatar.png"></image>
						<view class="uni-flex-item">
							<view class="h3">装灯实操课程</view>
						</view>
						<!-- <view class="btn" @click="shareCard">分享</view> -->
						<view style="padding: 0 20rpx;">
							<u-button type="success" color="#06A972" size="small" text="分享" openType="share"
								shape="circle"></u-button>
						</view>
					</view>
					<view class="bd" @click="goToClass(item)">
						<view class="p">{{item.className}}</view>
						<view class="video">
							<image show-mute-btn="true" style="height: 112px;"
								:src="item.frontUrl || 'http://video.naolamp.com/learn/1546153110670.jpg'">
							</image>
							<view class="text-overlay">{{item.className}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="carInfo.shareList.length > 0">
				<view class="box" v-for="(item, index) in carInfo.shareList" :key="index">
					<view class="uni-inline-item hd">
						<image @click="showHome(item.userInfoId)"
							:src="item.headImgUrl || '../../static/images/default_avatar.png'"></image>
						<view class="uni-flex-item">
							<view class="h3">{{item.userName}}</view>
							<view class="txt">{{item.createTime}}</view>
						</view>
						<!-- <view class="btn" @click="shareCard">分享</view> -->
						<view style="padding: 0 20rpx;">
							<u-button type="success" color="#06A972" size="small" text="分享" openType="share"
								shape="circle"></u-button>
						</view>
					</view>
					<view class="bd">
						<view class="p">{{item.shareContent}}</view>
						<view class="video">
							<block v-if="Object.prototype.toString.call(item.imgUrls) === '[object Array]'">
								<u-album :urls="item.imgUrls" :multipleSize="216" :space="10"
									:albumWidth="albumWidth"></u-album>
							</block>
							<block v-else>
								<image mode="aspectFill" :src="item.imgUrls" v-if="item.imgUrls"></image>
							</block>
							<image :id="item.shareId" v-if="item.videoUrl" show-mute-btn="true"
								@click="showVideDetail(item.shareId)"
								:src="item.frontUrl || 'http://39.108.4.123:8080/sale/./common/getImage?id=group1/M00/00/B8/rBLvXGK9RUiEV1IMAAAAAHq5ry0455.png'">
							</image>
						</view>
					</view>
					<view class="ft">
						<!-- <u-icon name="chat" size="48" :label="item.evalCount" @click="replyChange(item.evaluationId)"></u-icon> -->
						<u-icon name="thumb-up" size="48" :label="item.handCount"
							:color="item.isHand == 'N' || '#06A972'" @click="handlerLike(index, item.shareId)"></u-icon>
					</view>
				</view>
			</view>
			<view v-else>
				<u-empty mode="favor" icon="../../../../static/images/comment.png" text="暂无评论" width="320" height="320"
					textSize="24"></u-empty>
			</view>
		</view>
		<u-modal :show="replyShow" title="评论" @confirm="reply" @cancel="replyShow = false" showCancelButton>
			<u--textarea placeholder="这一刻的想法..." border="surround" height="200" v-model="content"
				type="number"></u--textarea>
		</u-modal>
		<!-- <view class="bottom" @click="goRelease">发布</view> -->
		<!-- 附近专业门店 -->
		<view v-if="currentTab === 2">
			<view class="nearby-stores">
				<view v-if="isFetchingStores" class="loading-container">
					<u-loading mode="circle" color="#06A972" size="60"></u-loading>
					<text>正在加载附近门店...</text>
				</view>
				<view class="news" v-if="!isFetchingStores && nearestStoresList.length > 0">
					<view class="box" v-for="(item, index) in nearestStoresList" :key="index">
						<view class="uni-inline-item hd">
							<image @click="showHome(item.userInfoId)"
								:src="item.headImgUrl || '../../../static/images/default_avatar.png'"></image>
							<view class="uni-flex-item">
								<view class="h3">{{item.userName}} {{item.userPhone}}</view>
								<view class="txt">{{item.province + item.city + item.area + item.address}}</view>
							</view>
							<!-- <view class="btn" @click="shareCard">分享</view> -->
							<view style="padding: 0 20rpx;">
								<u-button type="success" @click="openMapNavigation(item)" color="#06A972" size="small"
									text="导航" shape="circle"></u-button>
							</view>
						</view>
						<!-- <view class="bd">
							<view class="p">{{item.shareContent}}</view>
							<view class="video">
								<block v-if="Object.prototype.toString.call(item.imgUrls) === '[object Array]'">
									<u-album :urls="item.imgUrls" :multipleSize="216" :space="10"
										:albumWidth="albumWidth"></u-album>
								</block>
								<block v-else>
									<image mode="aspectFill" :src="item.imgUrls" v-if="item.imgUrls"></image>
								</block>
								<video show-mute-btn="true" :src="item.videoUrl" v-if="item.videoUrl"
									@click="enterFullScreen(item)"></video>
							</view>
						</view> -->
					</view>
				</view>
				<u-empty v-if="!isFetchingStores && nearestStoresList.length === 0" mode="favor"
					icon="../../../../static/images/store.png" text="暂无附近门店" width="320" height="320"
					textSize="24"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
	var qqmapsdk;
	import {
		mapGetters
	} from "vuex";
	import {
		getStoreAll,
		getUserInfo
	} from '@/api/user.js'
	import {
		getModelDetail
	} from '@/api/car.js';
	import {
		getList,
		getFamily
	} from '@/api/product.js';
	import {
		getAdvertisement,
	} from '@/api/common.js';
	export default {
		props: {
			carInfo: {
				type: Object,
				required: true,
			},
			title: {
				type: String,
				required: true,
			},
			imgUrl: {
				type: String,
				required: true,
			},
		},
		data() {
			return {
				harnessList: [],
				grilleList: [],
				barStyle: '#FF0000', // 初始颜色,
				latitude: 0,
				longitude: 0,
				isFetchingStores: false,
				nearestStoresList: [],
				jinKaPanList: [],
				kaPanList: [],
				jieMaList: [],
				jinDengGList: [],
				yuanDengGList: [],
				WuDengGList: [],
				yuanDengList: [],
				jinDengList: [],
				WuDengList: [],
				showHomePage: false,
				isFullScreen: false, // 是否全屏
				currentVideoIndex: 0, // 当前播放的视频 URL
				videoList: [],
				tabs: [{
						name: "产品"
					},
					{
						name: "案例"
					},
					{
						name: "附近会员店"
					}
				],
				currentTab: 0, // 当前选中的选项卡
				carId: '',
				adImages: [],
				Inv1: 0,
				items1: ['车灯'],
				swiperList: [],
				modelId: 0,
				list: [],
				active: 0,
				yearLeft: 0,
				carId: 0,
				year: '',
				loading: true,
				replyShow: false,
				content: '',
			};
		},
		computed: {
			...mapGetters(["isLogin", 'uid', 'userType', 'userInfo'])
		},
		mounted() {
			console.log("userType：" + this.userType);

			qqmapsdk = new QQMapWX({
				key: 'TNABZ-LWUCW-VT2RC-3XZY6-2N5LT-NIFGJ'
			});
			// 接收传递过来的参数
			this.carId = this.carInfo.id;
			this.modelId = this.carInfo.modelId; //将modelId值附上，分享需要用到
			console.log(this.carInfo);
			if (this.carInfo.jieMa == null || this.carInfo.jieMa.trim() == '') {
				this.carInfo.jieMa = '不需要解码'
				console.log("aa");
			}
			if (this.carInfo.kapan == null || this.carInfo.kapan.trim() == '') {
				this.carInfo.kapan = '不需要远光卡座'
			}
			if (this.carInfo.jinKaPan == null || this.carInfo.jinKaPan.trim() == '') {
				this.carInfo.jinKaPan = '不需要近光卡座'
			}
			//获取灯光信息
			//近光
			if (this.carInfo.jinDeng != null && this.carInfo.jinDeng != '') {
				this.getDengList(this.carInfo.jinDeng, "近灯")
			}
			//远光
			if (this.carInfo.yuanDeng != null && this.carInfo.yuanDeng != '') {
				this.getDengList(this.carInfo.yuanDeng, "远灯");
			}
			//雾灯
			if (this.carInfo.wuDeng != null && this.carInfo.wuDeng != '') {
				this.getDengList(this.carInfo.wuDeng, "雾灯");
			}
			//解码器
			if (this.carInfo.jieMa != null) {
				this.getFamily(5, "解码器")
			}

			this.getDengList("格栅近光灯", "格栅");
			this.getFamily(27, "遥控");
			//卡盘
			if (this.carInfo.kapan != null) {
				this.getFamily(4, "卡盘");
			}
			//近光卡盘
			if (this.carInfo.jinKaPan != null) {
				this.getFamily(4, "近光卡盘");
			}
			//近灯G
			this.getDengList(this.carInfo.jinDengG ? this.carInfo.jinDengG : '双杯LED双光透镜', "双杯LED双光透镜")
			//远光G
			this.getDengList(this.carInfo.yuanDengG ? this.carInfo.yuanDengG : '双直射LED双光透镜', "双直射LED双光透镜")
			//雾光G
			this.getDengList(this.carInfo.wuDengG ? this.carInfo.wuDengG : '雾灯防水透镜', "雾灯防水透镜")
			//提取视频信息
			this.carInfo.shareList.forEach(item => {
				if (item.videoUrl != null && item.videoUrl != '') {
					this.videoList.push(item.videoUrl);
				}
			})
			console.log(this.videoList);
			if (this.carInfo != null && this.carInfo != '') {
				this.carInfo.shareList.forEach((el) => {
					if (el.imgUrls) {
						el.imgUrls = el.imgUrls.split(",");
					}
				})
			}


			console.log("接收到的参数:", this.carId, this.title, this.imgUrl);
			console.log(this.carInfo);
		},
		methods: {
			goToClass(item){
				const url = `/pages/home/learn_class/learn_class?videoUrl=${item.videoUrl}&title=${item.className}`;
				uni.navigateTo({
					url: url,
				});
			},
			showVideDetail(shareId) {
				uni.setStorageSync('shareId', shareId)
				const url = `/pages/home/test/showVideDetail`;
				uni.navigateTo({
					url: url,
				});
			},
			openMapNavigation(store) {
				if (!store.latitude || !store.longitude) {
					uni.showToast({
						title: '门店位置信息不完整',
						icon: 'none'
					});
					return;
				}
				uni.openLocation({
					latitude: parseFloat(store.latitude), // 纬度
					longitude: parseFloat(store.longitude), // 经度
					name: store.userName, // 门店名称
					address: `${store.province}${store.city}${store.area}${store.address}`, // 详细地址
					success() {
						console.log("导航成功");
					},
					fail(err) {
						console.error("导航失败", err);
						uni.showToast({
							title: '导航失败，请检查位置权限',
							icon: 'none'
						});
					}
				});
			},
			/**
			 * 获取产品系列
			 * @param {int}  dictId
			 */
			getFamily(dictId, name) {
				let that = this;
				getFamily({
					classification: dictId
				}).then(res => {
					if (name === '解码器') {
						if (res && res.value) {
							if (this.carInfo.jieMa.includes("需要")) {
								res.value.forEach(item => {
									getList({
											typeId: item.typeId,
											itemName: item.itemName,
										})
										.then(res => {
											if (res && res.value && res.value.list) {
												this.jieMaList.push(res.value.list[0])
											}
										})
										.catch(err => {
											this.$util.Tips({
												title: err.message || "获取产品列表失败"
											});
										})
										.finally(() => {
											this.loading = false;
										});
								})
							} else {
								getList({
										itemName: this.carInfo.jieMa.trim(),
									})
									.then(res => {
										if (res && res.value && res.value.list) {
											this.jieMaList.push(res.value.list[0])
										}
									})
									.catch(err => {
										this.$util.Tips({
											title: err.message || "获取产品列表失败"
										});
									})
									.finally(() => {
										this.loading = false;
									});
							}
						}
					} else if (name === '卡盘') {
						if (res && res.value) {
							if (this.carInfo.kapan.includes("需要")) {
								res.value.forEach(item => {
									getList({
											typeId: item.typeId,
											itemName: item.itemName,
										})
										.then(res => {
											if (res && res.value && res.value.list) {
												this.kaPanList.push(res.value.list[0])
											}
										})
										.catch(err => {
											this.$util.Tips({
												title: err.message || "获取产品列表失败"
											});
										})
										.finally(() => {
											this.loading = false;
										});
								})
							} else {
								getList({
										itemName: this.carInfo.kapan.trim(),
									})
									.then(res => {
										if (res && res.value && res.value.list) {
											this.kaPanList.push(res.value.list[0])
										}
									})
									.catch(err => {
										this.$util.Tips({
											title: err.message || "获取产品列表失败"
										});
									})
									.finally(() => {
										this.loading = false;
									});
							}
						}
					} else if (name === '近光卡盘') {
						if (res && res.value) {
							if (this.carInfo.jinKaPan.includes("需要")) {
								res.value.forEach(item => {
									getList({
											typeId: item.typeId,
											itemName: item.itemName,
										})
										.then(res => {
											if (res && res.value && res.value.list) {
												this.jinKaPanList.push(res.value.list[0])
											}
										})
										.catch(err => {
											this.$util.Tips({
												title: err.message || "获取产品列表失败"
											});
										})
										.finally(() => {
											this.loading = false;
										});
								})
							} else {
								getList({
										itemName: this.carInfo.jinKaPan.trim(),
									})
									.then(res => {
										if (res && res.value && res.value.list) {
											this.jinKaPanList.push(res.value.list[0])
										}
									})
									.catch(err => {
										this.$util.Tips({
											title: err.message || "获取产品列表失败"
										});
									})
									.finally(() => {
										this.loading = false;
									});
							}
						}
					} else if (name === "遥控") {
						res.value.forEach(item => {
							getList({
									typeId: item.typeId,
									itemName: item.itemName,
								})
								.then(res => {
									if (res && res.value && res.value.list) {
										this.harnessList.push(res.value.list[0])
									}
								})
								.catch(err => {
									this.$util.Tips({
										title: err.message || "获取产品列表失败"
									});
								})
								.finally(() => {
									this.loading = false;
								});
						})
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
			skipToDetails(categoryId) {
				const url = `/pages/goods/goods_detail/index?productId=${categoryId}&type=STORE`;
				uni.navigateTo({
					url: url,
				});

			},
			getDengList(itemName, dengName) {
				let name = itemName.trim();
				let specialKeyword = ""; // 用于存储特殊关键词，如“偏心”或“解码车灯”

				// 检测并处理特殊关键词
				if (name.includes("偏心")) {
					name = name.replace("偏心", "");
					specialKeyword = "偏心";
				} else if (name.includes("解码车灯")) {
					name = name.replace("解码车灯", "");
					specialKeyword = "解码车灯";
				}

				getList({
						itemName: name
					})
					.then(res => {
						if (res && res.value && res.value.list) {
							const productList = res.value.list;

							// 定义一个通用的筛选函数
							const filterItems = (list, keyword, targetList) => {
								if (specialKeyword) {
									list.forEach(item => {
										if (item.productName.includes(keyword)) {
											targetList.push(item);
										}
									});
								} else {
									list.forEach(item => {
										if (!item.productName.includes("偏心")) {
											targetList.push(item);
										}
									});
								}
							};

							// 根据 dengName 分类处理
							switch (dengName) {
								case "近灯":
									filterItems(productList, specialKeyword, this.jinDengList);
									break;
								case "远灯":
									filterItems(productList, specialKeyword, this.yuanDengList);
									break;
								case "雾灯":
									filterItems(productList, specialKeyword, this.WuDengList);
									break;
								case "双杯LED双光透镜":
									this.jinDengGList = productList;
									break;
								case "双直射LED双光透镜":
									this.yuanDengGList = productList;
									break;
								case "雾灯防水透镜":
									this.WuDengGList = productList;
									break;
								case "格栅":
									this.grilleList = productList;
									break;
								default:
									console.warn("未知的 dengName 类型:", dengName);
							}
						}
					})
					.catch(err => {
						this.$util.Tips({
							title: err.message || "获取产品列表失败"
						});
					})
					.finally(() => {
						this.loading = false;
					});
			},
			haversineDistance(lat1, lon1, lat2, lon2) {
				const R = 6371; // 地球半径（单位：公里）
				const dLat = (lat2 - lat1) * Math.PI / 180;
				const dLon = (lon2 - lon1) * Math.PI / 180;

				const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const distance = R * c; // 距离（单位：公里）
				return distance;
			},
			//打开个人主页视图
			showHome(userInfoId) {
				const url = `/pages/home/test/test?userInfoId=${userInfoId}`;
				uni.navigateTo({
					url: url,
				});
			},
			// 进入全屏播放
			enterFullScreen(item) {
				this.currentVideoIndex = this.videoList.indexOf(item.videoUrl);
				this.isFullScreen = true;
			},
			// 退出全屏播放
			exitFullScreen() {
				this.isFullScreen = false;
			},
			// 处理 swiper 切换事件
			onSwiperChange(event) {
				console.log(event.detail.current)
				this.currentVideoIndex = event.detail.current;
			},
			getLocation() {
				uni.getLocation({
					isHighAccuracy: true, // 开启地图精准定位
					type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
					success: (res) => {
						console.log(res);
						this.latitude = res.latitude
						this.longitude = res.longitude
						// 逆地址解析方法
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success(res) {
								//拿到所在区域,根据所在区域，找打附近最近的门店
								console.log(res);
								//console.log(res.result.address_component.district)
							}
						})
						getStoreAll().then(res => {
								if (res && res.value) {
									// 计算每个门店与当前位置的距离，并存储到数组中
									const distances = res.value.map(item => ({
										...item,
										distance: this.haversineDistance(this
											.latitude, this.longitude, item
											.latitude, item.longitude)
									}));
									// 按距离排序并取最近的10条数据
									const nearestStores = distances.sort((a, b) => a.distance -
										b.distance).slice(0, 10);

									console.log("最近的10条门店数据：", nearestStores);
									this.nearestStoresList = nearestStores;
									this.isFetchingStores = false; // 加载完成，关闭加载
								}
							})
							.catch((err) => {
								console.error('获取门店数据失败：', err);
								uni.showModal({
									title: '提示',
									content: '获取门店数据失败，请稍后再试',
									showCancel: false
								});
								this.isFetchingStores = false; // 加载失败，关闭加载状态
							});
					},
					fail: (err) => {
						console.error('获取位置信息失败：', err);
						uni.showModal({
							title: '提示',
							content: '获取位置信息失败，请检查权限设置',
							showCancel: false
						});
						this.isFetchingStores = false; // 加载失败，关闭加载
						this.nearestStoresList = [];
					}
				});
			},
			switchTab(data) {
				let that = this;
				let index = data.index;
				if (index >= 0 && index < this.tabs.length) {
					this.currentTab = index;
					// 当切换到“附近专业门店”时，获取位置信息
					if (index === 2) {
						this.isFetchingStores = true; // 开始加载
						if (this.userType === "STORE") {
							this.nearestStoresList = [];
							//门店只展示自己
							getUserInfo({
								userInfoId: that.uid
							}).then(res => {
								this.nearestStoresList.push(res.value)
							}).catch(err => {
								that.$util.Tips({
									title: err
								});
							})
							this.isFetchingStores = false;
						} else {
							uni.authorize({
								scope: 'scope.userLocation',
								success: () => {
									console.log('用户已授权位置信息');
									this.getLocation();
								},
								fail: () => {
									console.log('用户拒绝授权位置信息');
									uni.showModal({
										title: '提示',
										content: '需要授权位置信息才能使用附近门店功能',
										showCancel: false
									});
									this.isFetchingStores = false; // 加载失败，关闭加载状态
								}
							});
						}
					}
				}
			},
			replyChange(evaluationId) {
				let that = this;
				that.replyShow = true;
				that.evaluationId = evaluationId;
			},
			/**
			 * 点赞
			 */
			handlerLike(index, evaluationId) {
				let that = this,
					url;
				console.log(evaluationId);
				if (that.carInfo.shareList[index].isHand == 'N') {
					that.carInfo.shareList[index].isHand = 'Y';
					that.carInfo.shareList[index].handCount++;
					url = 'share/hand';
				} else {
					that.carInfo.shareList[index].isHand = 'N';
					that.carInfo.shareList[index].handCount--;
					url = 'share/unHand';
				}
				that.$request.get(url, {
					mainId: evaluationId,
					shareEvalType: 'CUS_INFO',
					userInfoId: that.$store.state.app.uid
				}).then(res => {
					if (that.carInfo.shareList[index].isHand == 'Y') {
						that.$util.Tips({
							title: '点赞成功'
						})
					} else {
						that.$util.Tips({
							title: '点赞已取消'
						})
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
			getAdvertisement() {
				getAdvertisement({})
					.then(res => {
						// 处理成功的响应
						if (res && res.value) {
							this.adImages = res.value; // 将返回的广告数据赋值给 adImages
						} else {
							console.error('未获取到广告数据');
						}
					})
					.catch(error => {
						// 错误处理
						console.error('获取广告数据失败:', error);
					});
			},
			fetchProductList(itemName) {
				if (itemName != 'LED') {
					getList({
							itemName: itemName,
						})
						.then(res => {
							if (res && res.value && res.value.list) {
								if (res.value.list.length === 1) {
									//跳转至详情
									console.log('跳转至详情');
									const categoryId = res.value.list[0].categoryId; // 获取唯一对象的 categoryId
									const url = `/pages/goods/goods_detail/index?productId=${categoryId}&type=STORE`;
									uni.navigateTo({
										url: url,
									});
								} else {
									//跳转至列表
									console.log('跳转至列表');
									const url =
										`/pages/goods/goods_list/index?typeId=${ res.value.list[0].itemTypeId }&itemName=${itemName}&type=${this.userType}`;
									uni.navigateTo({
										url: url,
									});
								}
							}
						})
						.catch(err => {
							this.$util.Tips({
								title: err.message || "获取产品列表失败"
							});
						})
						.finally(() => {
							this.loading = false;
						});
				}
			},
		}
	};
</script>

<style>
	.product-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.product-item {
		width: 48%;
		height: 300rpx;
		/* 每个商品占据一半宽度，留出一些间距 */
		margin-top: 15rpx;
		/* 添加垂直间距 */
		text-align: center;
		background-color: rgba(0, 0, 0, .04);
		border-radius: 10%;
		margin-bottom: 10px;
	}

	.product-image {
		width: 230rpx;
		height: 200rpx;
		/* 设置固定高度，保持图片比例 */
		border-radius: 10rpx;
		margin-top: 30px;
	}

	.product-info {
		display: flex;
		flex-direction: column;
		/* 水平居中对齐 */
		width: 48%;
		/* 与图片宽度一致 */
	}


	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 50rpx 0;
		font-size: 28rpx;
		color: #666;
	}

	/* 水平滚动容器 */
	.product-scroll-view {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		scroll-behavior: smooth;
		padding: 20rpx 0;
		margin-left: 100rpx;
	}

	.salePrice {
		font-size: 16px;
		font-weight: 600;
	}

	.product-name {
		font-size: 16px;
		margin-bottom: 10px;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
		/* 超出部分显示为省略号 */
		width: 100%;
	}

	.car-box {
		display: flex;
		flex-direction: column;
		gap: 10px;
		/* 间距 */
		margin-top: 50rpx;
	}

	.info-item {
		display: flex;
		flex-direction: row;
		margin-top: 50rpx;
	}

	.car-info-section {
		display: flex;
		flex-direction: row;
		width: 100%;
		/* 占满整个屏幕 */
		padding: 20rpx;
		/* 内边距 */
		position: relative;
		/* 用于定位更多按钮 */
		gap: 20rpx;
		/* 子元素之间的间隙 */
	}

	.section-label {
		color: #727272;
		font-weight: bold;
	}

	.car-info-section>text:nth-child(2) {
		position: absolute;
		top: 0;
		right: 0;
		color: #666;
		/* 更多按钮颜色 */
		cursor: pointer;
		/* 鼠标悬停样式 */
	}

	.car-info-section>view {
		flex: 1;
		/* 平均分配宽度 */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 图片和文字居中 */
		margin-top: 50rpx;
		/* 与上方内容的间距 */
		margin-left: 70rpx;
	}

	.car-info-section>view>image {
		width: 150rpx;
		/* 图片宽度 */
		height: 150rpx;
		/* 图片高度 */
		margin-bottom: 5px;
		/* 图片与文字的间距 */
	}

	.product-info-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
		font-size: 12px;
	}

	.product-info-bottom {
		margin-top: 5px;
		font-size: 12px;
		color: #666;
	}

	/* 页面样式 */
	.container {
		padding: 0px;
	}

	.uni-flex-item-lamp {
		color: #06A972;
		/* 设置字体颜色 */
		text-decoration: underline;
		/* 给文字加下划线 */
		text-underline-offset: 10rpx;
		margin-left: 18rpx;
	}

	.title {
		text-align: center;
		padding: 40rpx 0 20rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.car-info-section {
		display: flex;
		align-items: center;
		padding: 24rpx 0;

	}

	.car-info-section:last-child {
		border-bottom: none;
	}

	.tab-box {
		line-height: 85rpx;
		padding: 20rpx 0;
	}

	.label {
		margin-right: 40rpx;
		color: #727272;
		width: 70px;
		text-align: justify;
		display: block;
		text-align-last: justify;
		font-weight: bold;
	}



	.image {
		width: 200rpx;
		height: auto;
	}

	.tit {
		font-weight: bold;
		padding: 30rpx 0;
		border-bottom: 1px solid #F2F2F2;
	}

	//评论
	.news {
		background: #FFFFFF;
		margin-top: 20rpx;
		padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
	}

	.news .box {
		border-bottom: 1rpx solid #F2F2F2;
	}

	.news .box:last-child {
		border: none !important;
	}

	.news .hd {
		padding: 30rpx 0;
	}

	.news .hd .h3 {
		font-weight: bold;
	}

	.news .hd .txt {
		color: #666666;
		font-size: 22rpx;
	}

	/* .news .hd button {
		font-size: 24rpx;
		background: #F3F3F3;
		border-radius: 50rpx;
		border: none;
	} */

	.news .hd .btn {
		padding: 8rpx 30rpx;
		font-size: 24rpx;
		background-color: #f3f3f3;
		border-radius: 50rpx;
		box-shadow: 0px 4px 4px 0px #e4d9d9;
	}

	.news .hd image {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.news .bd .p {
		padding: 0 0 20rpx;
	}

	.news .video {
		position: relative;
	}

	.news .video video {
		width: 100%;
	}

	.news .video .pic {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 72rpx;
		height: 72rpx;
	}

	.news .video .text-overlay {
		position: absolute;
		/* 设置绝对定位 */
		left: 20rpx;
		/* 根据需要调整文字的水平位置 */
		top: 50%;
		/* 垂直居中 */
		transform: translateY(-50%);
		/* 精确居中 */
		color: white;
		/* 文字颜色 */
		font-size: 25rpx;
		/* 文字大小 */
		z-index: 10;
		/* 确保文字在图片上层 */
	}

	.news .ft {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx 30rpx;
		/* color: #979797; */
	}

	.news .ft .u-icon~.u-icon {
		margin-left: 20rpx;
	}

	/* 标题区域 */
	.title-box {
		background-color: rgba(169, 169, 169, 0.3);
		/* 淡灰色透明背景 */
		padding: 10px;
		text-align: center;
		/* 与下方滚动区域之间的间距 */
		border-radius: 25rpx;
		width: 600rpx;
		margin: 40rpx auto 40rpx;
		/* 水平居中 */
	}

	.model-detail {
		font-size: 35rpx;
		font-weight: bold;
		color: #333;
	}

	.tab {
		position: relative;
		/* 相对定位 */
		right: 8px;
		bottom: -3px;
		/* 右对齐 */
		background: none;
		/* 去掉按钮背景 */
		padding: 0;
		/* 去掉默认的内边距 */
		margin: 0;
		/* 去掉默认的外边距 */
	}

	.tab::after {
		border: none;
	}

	.tab-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.tab-text {
		font-size: 15px;
		color: #8a8a8a;
		/* 设置字体颜色 */
	}

	.fullscreen-video {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: black;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.video-swiper {
		width: 100%;
		height: 100%;
	}

	.fullscreen-video-player {
		width: 100%;
		height: 100%;
	}

	.video-container {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.user-avatar {
		position: absolute;
		bottom: 40rpx;
		left: 40rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
	}

	.video-caption {
		position: absolute;
		bottom: 240rpx;
		left: 30rpx;
		color: #ffffff;
		font-weight: 600;
		font-size: 40rpx;
		padding: 10rpx;
		border-radius: 10rpx;
	}

	.city-name {
		position: absolute;
		bottom: 300rpx;
		left: 30rpx;
		color: #ffffff;
		font-weight: 600;
		font-size: 40rpx;
		padding: 10rpx;
		border-radius: 10rpx;
	}

	.car-brand {
		position: absolute;
		bottom: 375rpx;
		left: 30rpx;
		color: #ffffff;
		font-size: 30rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		background-color: green;
	}

	.user-name {
		position: absolute;
		bottom: 60rpx;
		left: 140rpx;
		/* 根据头像的宽度调整 */
		color: #ffffff;
		font-size: 40rpx;
		font-weight: 600;
	}
</style>